<template>
    <view class="bg-[#EAEAEA] min-h-screen">
        <view class="h-[10rpx]"></view>
        <view class="bg-white px-[30rpx] text-[30rpx]  py-[20rpx]  font-medium">
            <view class="pb-[20rpx] border-b border-[#EFEFEF]">

                <view class="flex items-center">统计范围：<view class="border-[#D8D8D8] border-b">广西</view>
                </view>
                <view class="flex items-center mt-[30rpx]">课堂类型：<view class="border-[#D8D8D8]  border-b flex items-center">
                    学校课堂<u-icon name="arrow-down" color="#444444" size="18"></u-icon></view>
                </view>
                <view class="flex items-center mt-[30rpx]">统计时段：
                    <view class="border-[#D8D8D8] border-b flex items-center mr-[30rpx]">2024.09.01 ~ 2024.10.01</view>
                    当前
                </view>
                <view class="flex items-center mt-[30rpx]">统计区域：
                    <view>
                        <u-checkbox-group shape="circle" v-model="checkboxValue" @change="checkboxChange">
                            <u-checkbox :customStyle="{ marginRight: '8px' }" label="显示本级学校" name="1"> </u-checkbox>
                            <u-checkbox label="显示所辖" name="2"> </u-checkbox>
                        </u-checkbox-group>
                    </view>
                </view>

            </view>
            <view class=" border-b border-[#EFEFEF]">
                <view class="flex flex-wrap items-center">

                    <view class="mr-[20rpx] mt-[20rpx] flex items-center" v-for="(item, index) in list" :key="index">
                        <view :style="{ 'background': item.color }" class="w-[32rpx] h-[32rpx] rounded-full mr-[6rpx]">
                        </view> <text class="mr-[10rpx]">{{ item.label }}</text>
                        <u-checkbox label="" :name="item.label"> </u-checkbox>
                    </view>
                </view>
                <view class="my-[20rpx] flex items-center"><text class="mr-[10rpx]">人数、打卡、评价</text><u-checkbox label=""
                        name="666"> </u-checkbox></view>
            </view>
            <view class="my-[30rpx]">
                <text>共</text>
                <text class="text-[#fd755d] border-b border-[#D8D8D8]">16</text>
                <text class="mr-1">个单位</text>
                <text>数据汇总</text>
                <text class="text-[#fd755d] border-b border-[#D8D8D8]">98745</text>
            </view>
            <view class="flex justify-between">
                <view class="flex items-center">自定义排序<u-icon name="arrow-down" color="#444444" size="18"></u-icon>
                </view>
                <view class="flex items-center">
                    <view class="flex items-center mr-5">升序<u-icon name="arrow-up" color="#444444" size="18"></u-icon>
                    </view>
                    <view class="flex items-center">降序<u-icon name="arrow-down" color="#444444" size="18"></u-icon>
                    </view>
                </view>
                

            </view>
            <qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue';
const list = ref([{
    label: "学校",
    color: "#54A0F1"
}, {
    label: "班级",
    color: "#FFFF80"
}, {
    label: "人数",
    color: "#FFA812"
}, {
    label: "课数",
    color: "#B9ADFF"
}, {
    label: "打卡",
    color: "#67A504"
}, {
    label: "请假",
    color: "#5755FF"
}, {
    label: "评价",
    color: "#FD755D"
}])
const chartData = ref({
    categories: ["广西老年大学","南宁市","北海市","白色市","柳州市","玉林市"],
    series: [
        {
            name: "目标值",
            data: [35, 36, 31, 33, 13, 34]
        }
    ]
})
const opts = ref({
    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
    padding: [15, 30, 0, 5],
    enableScroll: false,
    legend: {},
    xAxis: {
        boundaryGap: "justify",
        disableGrid: false,
        min: 0,
        axisLine: false,
        max: 40
    },
    yAxis: {},
    extra: {
        bar: {
            type: "group",
            width: 30,
            meterBorde: 1,
            meterFillColor: "#FFFFFF",
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "custom",
            barBorderCircle: true,
            seriesGap: 2,
            categoryGap: 2
        }
    }
})
</script>